﻿<div id="loginScreen">

    <header class="login-head">

        <!--src is needed for chrome to avoid grey border-->
        <img class="cc-logo" src="img/logo_cc.png" />
        <aside class="login-colorbar">
            <div class="colorbar-element background-ccdarkblue"></div>
            <div class="colorbar-element background-cclightblue"></div>
            <div class="colorbar-element background-ccdarkgreen"></div>
            <div class="colorbar-element background-ccligthtgreen"></div>
            <div class="colorbar-element background-ccdarkpink"></div>
            <div class="colorbar-element background-cclightpink"></div>
            <div class="colorbar-element background-ccred"></div>
            <div class="colorbar-element background-ccorange"></div>
            <div class="colorbar-element background-ccyellow"></div>
        </aside>
        <aside class="login-caption">
            <strong class="login-title">CareCenter goes mobile</strong>
            <small class="login-subtitle">Prozesse gezielt Unterstützen</small>
        </aside>
    </header>
    <main class="login-tiles">
        <div class="tile tile-login background-ccyellow">
            <form id="loginForm" method="post" class="login-form" data-bind="submit: submit.bind($root, $element)">
                <!--ko if: Mode != 'Login'-->
                <h1 class="tile-header" data-bind="text: Application.Resources.Views.Login.Pin_title">Enter pin (4 digits)</h1>
                <!-- /ko -->
                <!--ko if: Mode == 'Login'-->
                <h1 class="tile-header">Anmeldeinformation</h1>
                <!-- /ko -->
                <select class="mandant-select" data-bind="options: LoginModel.Mandants, optionsText: 'MandantName', optionsValue: 'MandantNumber', value: mandantNumber, visible: Mode == 'Login', disable: LoadingLoginData"></select>
                <input class="tap-space-top border-none" autofocus="autofocus" data-val="true" name="UserName" type="text" data-bind="value: LoginModel.UserName, attr: { placeholder: Application.Resources.Views.Login.User_name }, visible: Mode == 'Login', disable: LoadingLoginData" />
                <input class="tap-space-top border-none" data-val="true" name="Password" type="password" data-bind=" value: LoginModel.Password, attr: { placeholder: Application.Resources.Views.Login.Password }, visible: Mode != 'LoginPinSettings', disable: LoadingLoginData" />

                <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>

                <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                <div class="tap-space-top" data-bind="visible: IncorrectLogin, text: (Mode == 'Login' ? IncorrectLoginMessage :  Application.Resources.Views.Login.Incorrect_password)">
                    Incorrect login or password
                </div>

                <input class="maskedText border-none tap-space-top" name="Pin" type="number" data-bind="value: Pin, valueUpdate: 'keyup', attr: { placeholder: Application.Resources.Views.Login.PIN, title: Application.Resources.Views.Login.Pin_title }, visible: Mode != 'Login', hasFocus: Mode != 'Login'" />
                <div class="white" data-bind="validationMessage:Pin"></div>
                <input class="maskedText border-none tap-space-top" data-val="true" name="PinCofirmed" type="number" data-bind=" value: PinConfirmed, attr: { placeholder: Application.Resources.Views.Login.Confirm_pin, title: Application.Resources.Views.Login.Pin_title }, visible: Mode == 'LoginPinSettings' " />

                <div class="tap-space" data-bind="visible: IncorrectPin, text: Application.Resources.Views.Login.Invalid_pin">
                    Incorrect pin
                </div>
                <span class="field-validation-valid white" data-valmsg-for="Pin" data-valmsg-replace="true"></span>
                <div class="logout fa fa-power-off fa-4x" data-bind="click: logout.bind($root, $element), visible: Mode == 'Locked'"></div>
                <!-- ko if: !IsNewVersionAvailible -->
                <button name="commit" class="login-button fa fa-4x fa-check-circle" data-bind=" disable: LoadingLoginData"></button>
                <!-- /ko -->
                <!-- ko if: IsNewVersionAvailible -->
                <span class="spanBr tap-space-top">Neue Version steht zum Download bereit</span>
                <button class="fa fa-4x fa-download login-button" data-bind="click:downloadCCM"></button>
                <!-- /ko -->

            </form>
        </div>
        <div class="tile tile-mandant-rss">
            <div class="tile-mandant background-ccdarkpink">
                    <img data-bind="attr: { src: mandantLogoUrl }" />
                <span>Wilkommen in der mobilen Welt</span>
            </div>
            <div class="tile-rss background-ccligthtgreen">
                <h1 class="tile-header" data-bind="text: Application.Resources.Views.Login.NewsTitle">News</h1>
                <ul class="resetUl" data-bind="foreach: RssNews">                    
                    <li>
                        <div class="news-date" data-bind="text: Globalize.format(date, 'd')"></div><a class="news-text" href="#" data-bind="click: $root.openUrl.bind(url, url)"><span data-bind="text: title"></span></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tile tile-info background-ccdarkblue">
            <h1 class="tile-header" data-bind="text: Application.Resources.Views.Login.InformationTitle">Information</h1>
            <!-- ko if: Mode == 'Login' -->
            <button class="settings fa fa-cog fa-4x" data-bind="click: openSettingsBindable, css: { 'fa-spin': LoadingLoginData }"></button>
            <!-- /ko-->
            <table class="tile-info-table">
                <tbody>
                    <tr><th colspan="2" data-bind="text: Application.Resources.Views.Notifications.WebServerInfo">Web Server information</th></tr>
                    <tr><td data-bind="text: Application.Resources.Views.Notifications.WebServiceIP">Server IP Addresse:</td><td data-bind="text: Status.ServerIP"></td></tr>                    
                    <tr><td data-bind="text: Application.Resources.Views.Notifications.ServiceVersion">Service version:</td><td data-bind="text: Status.ServiceVersion"></td></tr>
                    <tr><th colspan="2" data-bind="text: Application.Resources.Views.Notifications.MandantInfo">Mandant information</th></tr>
                    <tr><td data-bind="text: Application.Resources.Views.Login.MandantTitle">Mandant</td><td  data-bind="text: MandantStatuses[mandantNumber] ? MandantStatuses[mandantNumber].MandantName : ''"></td></tr>
                    <tr><td data-bind="text: Application.Resources.Views.Notifications.DatabaseServer">DB-Server</td><td data-bind="text: MandantStatuses[mandantNumber]? MandantStatuses[mandantNumber].ServerName: ''"></td></tr>
                    <tr><td data-bind="text: Application.Resources.Views.Notifications.DatabaseInstance">DB-instance</td><td data-bind="text: MandantStatuses[mandantNumber]? MandantStatuses[mandantNumber].DatabaseName: ''"></td></tr>
                    <tr><td data-bind="text: Application.Resources.Views.Notifications.ConnectionSuccess">Connection succesful:</td><td data-bind="text: MandantStatuses[mandantNumber]? MandantStatuses[mandantNumber].ConnectionSuccess: ''"></td></tr>
                    <tr><th colspan="2"  data-bind="text: Application.Resources.Views.Login.DeviceInfo">Tablet information</th></tr>
                    <tr><td data-bind="text: Application.Resources.Views.Settings.DeviceID">Tablet-ID</td><td data-bind="text: DeviceID"></td></tr>
                    <tr><td data-bind="text: Application.Resources.Views.Login.ClientVersion">Version</td><td data-bind="text: ClientVersion"></td></tr>
                </tbody>
            </table>
            <footer class="tile-info-footer">
                <div data-bind="text: Application.Resources.Views.Login.All_rights_reserved">Alle Rechte vorbehalten</div>
                <span data-bind="text: Application.Resources.Views.Login.Copyright_footer">Copright CareCenter Software GmbH</span>
            </footer>
        </div>
    </main>
    <footer class="login-footer"></footer>
</div>


